<template>
	<view class='vlabel' :style='{"color": textColor,"font-size":upx2px(textSize),"line-height":upx2px(textSize),"width":upx2px(width),"height":upx2px(height),"border-radius": upx2px(radius),"padding-left":upx2px(paddingH),"padding-right":upx2px(paddingH),"padding-top":upx2px(paddingV),"padding-bottom":upx2px(paddingV),"border":border,"background":backgroundColor}'>
		<text style='z-index:2;'>{{text}}</text>
		<image v-if='src.length>0' :src='src' class='vlabel-img'></image>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			text: {
				type: String,
				default: ''
			},
			textColor: {
				type: String,
				default: 'rgba(54,192,161,1)'
			},
			textSize: {
				type: String,
				default: '10px'
			},
			width: {
				type: String,
				default: 'auto'
			},
			height: {
				type: String,
				default: 'auto'
			},
			radius: {
				type: String,
				default: ''
			},
			borderColor: {
				type: String,
				default: 'transparent'
			},
			backgroundColor: {
				type: String,
				default: 'transparent'
			},
			src: {
				type: String,
				default: ''
			},
			paddingH: {
				type: String,
				default: '0upx'
			},
			paddingV: {
				type: String,
				default: '0upx'
			}
		},
		computed: {
			border() {
				return "1px solid " + this.borderColor
			}
		},
		data() {
			return {

			};
		},
		methods:{
			upx2px(upx) {
				//如果是upx结尾，则去掉upx并转换为px
				if(upx.endsWith("upx")) {
					upx = upx.replace("upx","")
				} else if(upx.endsWith("px") || upx.endsWith("%")) {//如果是px或%结尾，则原样返回
					return upx
				} 
				//如果没有传入单位，则为upx
				return uni.upx2px(upx) + "px";
			}
		}
	}
</script>

<style>
	.vlabel {
		display: flex;
		align-items: center;
		justify-content: center;
		vertical-align: middle;
		overflow: hidden;
		position:relative;
	}

	.vlabel-bg-img {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}

	.vlabel-img {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0px;
		top: 0px;
		z-index: 1;
	}
</style>
